<template>
	<section id="author">
		<el-card class="" shadow="never">
			<!-- Card Header -->
			<div slot="header">
				<span class="has-text-weight-bold">👨‍💻 关于作者</span>
			</div>
			<!-- Card Body -->
			<div class="has-text-centered">
				<p class="is-size-5 mb-5">
					<router-link :to="{ path: `/member/${author.username}/home` }">
						{{ author.nickname }} <span class="is-size-7 has-text-grey">{{ '@' + author.username }}</span>
					</router-link>
				</p>
				<div class="columns is-mobile">
					<!-- 当前帖子所属用户的总发帖数 -->
					<div class="column is-half">
						<code>{{ author.postNum }}</code>
						<p>帖子</p>
					</div>
					<!-- 当前帖子所属用户的粉丝数 -->
					<div class="column is-half">
						<code>{{ author.followerNum }}</code>
						<p>粉丝</p>
					</div>
				</div>
				<!-- 未关注 & 已关注按钮 -->
				<div>
					<!-- 已关注 则可以取关 -->
					<button 
						v-if="hasFollowed" 
						class="button is-success button-center is-fullwidth" 
						@click="handleUnFollow(author.id)"
					>
						已关注
					</button>
					<!-- 未关注 则可以关注 -->
					<button 
						v-else 
						class="button is-link button-center is-fullwidth" 
						@click="handleFollow(author.id)"
					>
						关注
					</button>
				</div>
			</div>
		</el-card>
	</section>
</template>

<script>
import { follow, fetchHasFollowed, unFollow } from '@/api/follow'
import { mapGetters } from 'vuex'

export default {
  	name: 'Author',

	props: {
		author: {
			type: Object,
			default: null
		}
 	},

	data() {
		return {
			// 当前用户是否已经关注了帖子的作者，默认是没有关注
			// hasFollowed 的值要从后端查询 following 表后得到，
			// 通过当前组件实例 mount 时，通过调用 fetchHasFollowed 方法得到
			// 默认是 false
			hasFollowed: false
		}
	},

	// 页面加载完成时，需要 fetch 一下 hasFollow 的信息，查看是否已经关注了当前的用户
	mounted() {
		this.getHasFollowed()
	},

	computed: {
		// 取出 token 判断是否为已经登录用户
		...mapGetters([
			'token'
		])
	},

	methods: {
		// 在当前组件 mount 时，查看登录用户 与 当前帖子的用户之间是否已经存在关注关系
		getHasFollowed() {
			// 首先判断当前用户是否登录，若没有关注则直接显示 "关注"
			// token 从 mapGetter 中获取
			if(this.token != null && this.token !== '') {
				// this.author.id 是由外面父组件 Detail.vue 传递过来 :author="postAuthor"
				// 传递之后当前子组件 Author.vue 中的 props.author 就有值了
				// this.author.id 指当前帖子作者的 id，
				// 发送给服务器后，服务器自动根据 token 中的 username 得到当前登录用户的 id
				// 然后根据帖子作者的 id 与 当前登录用户的 id 进行比对，判断是否有关注
				fetchHasFollowed(this.author.id).then(value => {
					const { data } = value
					this.hasFollowed = data.hasFollowed
				})
			}
		},

		// 关注当前帖子的作者 
		handleFollow(authorId) { 
			if(this.token != null && this.token !== '') {
				follow(authorId).then(response => {
					const { message } = response
					this.$message.success(message)
					this.hasFollowed = !this.hasFollowed
					this.author.followerNum = parseInt(this.author.followerNum) + 1
				})
			} else{
				this.$message.success('请先登录')
			}
		},

		// 取关当前帖子的作者
		handleUnFollow(authorId) { 
			unFollow(authorId).then(response => {
				const { message } = response
				this.$message.success(message)
				this.hasFollowed = !this.hasFollowed
				this.author.followerNum = parseInt(this.author.followerNum) - 1
			})
		}
	}
}
</script>

<style scoped>
</style>
